import { createApp, Ref } from 'vue'
import App from './App.vue'
// 导入 mitt
import mitt from 'mitt'
// 导入全局组件
// import Card from './components/Card/index.vue'
// 对 App 组件实例调用 component 方法，注册全局组件
// 第一个参数为注册的全局组件名，第二个参数为组件实例
// createApp(App).component('Card', Card).mount('#app')

// 导入 elementUI 库和 elementUI 样式库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 导入 tailwindCSS 样式库
// import './index.css'

// 导入插件
import Loading from './components/Loading'

// 创建根组件实例
const app = createApp(App)
// 调用 mitt 创建一个实例
const Mit = mitt()

// 定义接口 Filter 约束 $filter
interface Filter {
  // 函数签名形式，即 Filter 类型包含一个 format 方法
  // format 方法使用泛型，参数为泛型类型，返回值为字符串类型
  format<T>(str: T): string
}

// 定义接口 Loading1 约束 $loading1
interface Loading1 {
  // 函数签名形式约束函数参数类型及返回值类型
  hide: () => void
  show: () => void
  flag: Ref<boolean>
}

// 声明全局变量及全局函数，在 @vue/runtime-core 模块中声明
declare module '@vue/runtime-core' {
  // 导出 ComponentCustomProperties 接口，在接口中声明全局变量的类型
  export interface ComponentCustomProperties {
    $Bus: typeof Mit,
    $str: string,
    $filter: Filter
    $loading1: Loading1
  }
}

// 定义全局函数 $Bus 为 Mit 函数
app.config.globalProperties.$Bus = Mit

// 定义全局函数 $filter
app.config.globalProperties.$filter = {
  format<T>(str: T): string {
    return '++' + str
  }
}
// 定义全局变量 $str
app.config.globalProperties.$str = 'aaa'

// 调用 use 方法，注册插件，调用完成后会将 app 传入插件的 index.ts 中的 install 方法作为参数
// 注册 ElementPlus 插件
app.use(Loading).use(ElementPlus)


// 将根组件实例渲染到对应位置
app.mount('#app')
